<!-- 异步 -->
<template>
    <div ref="x">
        {{ text }}
    </div>
    <button @click="change">change div</button>
</template>
    
<script setup lang='ts'>
import { ref, nextTick } from 'vue';

const text = ref('默认值')
const x = ref<HTMLElement>()

const change = async () => {
    text.value = '被改值'
    console.log(x.value?.innerText) //默认值
    //创建一个异步任务，那么它自然要等到同步任务执行完成后才执行。
    await nextTick();
    console.log(x.value?.innerText) //被改值
}


</script>

  
<style  scoped></style>